<template>
	<view class="content">
		<view v-for="item in content1">
			
		
		<view class="title">
			<view class="title-img">
				<image :src="item.nameimg" mode=""></image>
			</view>
			<view class="title-name">
				<view class="title-name1">{{item.name1}}</view>
				<view class="title-name2">{{item.nametime}}</view>
			</view>
		</view>
		<view class="name">
			<view class="name-jia">{{waresPrice}}</view>
			<view class="name-title">{{item.title}}</view>
		</view>
		<view class="xiangqing-img">
			<image :src="item.imgs1" mode=""></image>
			<image :src="item.imgs2" mode=""></image>
		</view>
		<view class="xiangqing-img-name">
			<view class="xiangqing-img-name1">{{item.fenlei}}</view>
			<view class="xiangqing-img-name2">{{item.shou}}</view>
		</view>
		<view class="liuyan">
			<view class="liuyan-title">
				<view class="liuyan-title1">留言</view>
				<view class="liuyan-title2" @tap="tapPopup2">我要留言</view>
			</view>
			<view class="popup" v-show="show2">
						<view class="popup-info">
							<span>留言内容</span>
						<view class="popup-input"><input type="text" value="" placeholder="请输入留言内容" /></view>
							<view class="popup-btn">
								<button @tap="cancel2" class="prop-btn1" @click="cancel2">取消</button>
								<button @tap="affirm2" class="prop-btn2" @click="affirm2">确认</button>
						</view>
					</view>
			</view>
			<view class="liuyan-content" v-for="(item, index) in WaresIdComment">
				<view class="liuyan-content-top">
					<view class="liuyan-content-top1">
						<image src="../../static/addition/imgs9.png" mode=""></image>
						<span>{{item.nickName}}</span>
					</view>
					<!-- @click="open1(index)" -->
					<view class="liuyan-content-top2" @tap="tapPopup">
						<image src="../../static/addition/imgs7.png" mode=""></image>
					</view>
				</view>
				<view class="liuyan-content-content">
					{{item.content}}
				</view>
				<view class="liuyan-content-bottom">
					<view class="liuyan-content-bottom1">{{item.time}}</view>
					<view class="liuyan-content-bottom2">
						<view class="liuyan-content-bottom2-left">
							<image src="../../static/addition/imgs10.png" mode=""></image>
						</view>
						<view class="liuyan-content-bottom2-right">
							{{item.clickNum}}
						</view>
					</view>
				</view>
			</view>
			<view class="popup" v-show="show">
						<view class="popup-info">
							<span>举报内容</span>
						<view class="popup-input">
							
							<input type="text" value="" placeholder="请输入举报内容" /></view>
							<view class="popup-btn">
								<button @tap="cancel" class="prop-btn1" @click="cancel">取消</button>
								<button @tap="affirm" class="prop-btn2" @click="affirm">确认</button>
						</view>
					</view>
			</view>
			<view class="btn">
				<view class="btn-left">
					<!--  @click="open"  -->
					<view class="btn-left1" @tap="tapPopup">
						<view class="btn-left-top">
							<image src="../../static/addition/imgs13.png" mode=""></image>
						</view>
						<view class="btn-left-bottom">
							举报
						</view>
						<uni-popup ref="popup" :mask-click="false" type="dialog" background-color="#ff5500">
						   <view class="popuptwo">
							<view class="">
						<input type="text" v-model="jubao" class="pop-input" placeholder="请输入举报内容"/>
						</view>
						<view class="prop-btn">
							<button class="prop-btn1" @click="cance2">关闭</button>
							<button class="prop-btn2" @click="goReport">确定</button>
						</view>
						   </view>
						</uni-popup>
						
					</view>
					<view class="btn-left1" @click="shouCang(1)">
						<view class="btn-left-top">
							<image src="../../static/addition/imgs12.png" v-show="!shoucangtu"></image>
							<image src="../../static/addition/imgs15.png" v-show="shoucangtu"></image>
						</view>
						<view class="btn-left-bottom">
							收藏
						</view>
					</view>
					<view class="btn-left1" @tap="tapPopup2">
						<view class="btn-left-top">
							<image src="../../static/addition/imgs14.png" mode=""></image>
						</view>
						<view class="btn-left-bottom">
							留言
						</view>
					</view>
				</view>
				<view class="btn-right" @click="goFree()">
					我想要
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				waresPrice:'',//寄售商品价格
				shoucangtu:false,//收藏点击切换
				shoucangtu2:false,//收藏点击切换
				shuju: '',// 后台
				report:'',//本地接收举报举报
				jubao:'',
				huifucontent:'',//回复评论内容
				jubaoping:'',//举报评论接口
				reportping:'',//举报评论内容
				spid:'777',
				dingdan:'',//订单id
				pinglunid:'',//评论id
				parentCommentId:'',//被回复的评论ID
				parentUserId:'',//被回复的用户ID
				waresId:'',//寄售商品详情id
				content1:[
					{
						name1:'山东榴弹烟花研制制造集团',
						nametime:'1分钟前，发布于济南',
						nameimg:'../../static/addition/add-imgs1.png',
						imgs1:'../../static/addition/imgs5.png',
						imgs2:'../../static/addition/imgs6.png',
						// waresPrice:'2839.92',//寄售商品价格
						title:'Microsoft Xbox one S专业游戏玩家机 1TB<br/>这里是其他补充说明，比如说不想要了的理由等等这里是其他补充说明，比如说不想要了的理由等等这里是其他补充说明，比如说不想要了的理由等等这里是其他补充说明，比如说不想要了的理由等等这里是其他补充说明，比如说不想要了的理由等等 ',
						fenlei:'电子数码|游戏机',
						shou:'18人收藏'
					}
					
				],
				
				show:false,
				show2:false,
				WaresIdComment:[],//商品评论
			};
		},
		onShow() {
			console.log('---------1111')
			// this.goLoginto()
		},
		onLoad(options) {
			console.log(options)
			console.log(options.waresPrice,'****************************')
			this.waresPrice = options.waresPrice
			console.log(options.waresId,'拿到寄售商品id615')
			this.waresId = options.waresId
			this.pingLun(),
			// this.juBaoping(),
			this.maiShan(),
			this.mai2Shan(),
			this.huiFuping(),
			this.jiShouxiangqing(),
			this.dianPing(),
			this.shanPing(),
			this.pingLunjishou()
		},
		methods:{
	// 弹窗
			tapPopup() {
				this.show = true;
			},
			tapPopup2() {
				this.show2 = true;
			},
			// 点击弹窗取消
			cancel() {
				this.show = false;
			},
			// 点击弹窗取消
			cancel2() {
				this.show2 = false;
			},
			// 点击弹窗确认
			affirm() { 
				this.show = false;
				this.juBaoping()
			},
			affirm2() {
				this.show2 = false;
			},
			 open() {
			            this.$refs.popup.open('top')
			        },
			 close() {
			     this.$refs.popup.close()
			 },
			 goFree() {
				var content1 = JSON.stringify(this.content1)
				                uni.navigateTo({
				                    // url:'../mall/order-from/purchase-quantity?list=' + list + '&opop' + content1 
									url:'../mall/order-from/purchase-quantity?content1=' + content1 + '&waresId=' + this.waresId + '&waresPrice=' + this.waresPrice
				                })
			 },
			 //评论寄售商品
			 pingLunjishou() {
			 	var that = this
			 	that.$http.req.ajax({
			 	     path: ':8090/web/idleWares/idleWaresComment',
			 		 header: {
			 		       'token': uni.getStorageSync('token')
			 		      },
			 	     data: {
			 	    waresId:'444',// 寄售商品ID
			 		content:'评论内容评论内容评论内容评论内容'// 评论内容
			 	     },
			 	     afterAjax: (res) => {
			 			 		console.log(res,'初始化评论寄售商品接口')
			 			 		if (res.code !== 200) {
			 			 			console.log(res.data,'初始化评论寄售商品接口错误')
			 			 		}
			 			 		if (res.code == 200) {
			 			 			console.log('初始化评论寄售商品通了')
			 						uni.showToast({
			 							title: '初始化点赞评论接口',
			 							icon: 'none'
			 						})
			 			 		}
			 	     }
			 	    })
			 },
			 // 删除评论接口
			 shanPing() {
			 	var that = this
			 	that.$http.req.ajax({
			 	     path: ':8090/web/idleWares/idleWaresCommentDelete',
			 		 header: {
			 		       'token': uni.getStorageSync('token')
			 		      },
			 	     data: {
			 	     commentId:that.pinglunid
			 	     },
			 	     afterAjax: (res) => {
			 			 		console.log(res,'删除评论')
			 			 		if (res.code !== 200) {
			 			 			console.log(res.data,'删除评论错误')
			 			 		}
			 			 		if (res.code == 200) {
			 			 			console.log('删除评论通了')
			 						uni.showToast({
			 							title: '删除评论接口',
			 							icon: 'none'
			 						})
			 			 		}
			 	     }
			 	    })
			 },
			//收藏
			//初始化点赞评论
			dianPing() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresCommentClick',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				    commentId:'444',
					 clickType:'1'// 1点赞 0取消点赞
				     },
				     afterAjax: (res) => {
						 		console.log(res,'初始化点赞评论接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'初始化点赞评论接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log('初始化点赞评论通了')
									uni.showToast({
										title: '初始化点赞评论接口',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
			//回复评论
			huiFuping() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresCommentReply',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     evaluateId:that.pinglunid,
					 content:that.huifucontent,//举报评论内容
					 parentCommentId:that.parentCommentId,//被回复的评论ID
					 parentUserId:that.parentUserId//被回复的用户ID
				     },
				     afterAjax: (res) => {
						 		console.log(res,'回复评论接口')
						 		if (res.code !== 200) {
						 			// uni.showToast({
						 			// 	title: res.msg,
						 			// 	icon: 'none'
						 			// })
						 			console.log(res.msg,'回复评论接口拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('回复评论接口通了')
						 			that.report = res
									uni.showToast({
										title: '回复评论接口',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
			//收藏接口
			shouCang(e) {
				this.shoucangtu = !this.shoucangtu
				console.log(e,'点击收藏')
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresCollect',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     pageNum:'10',
					 pageSize:'10'
				     },
				     afterAjax: (res) => {
						 		console.log(res,'收藏接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'收藏接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log('收藏通了')
									uni.showToast({
										title: '收藏接口',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
			//寄售商品详情
			jiShouxiangqing() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresDetail',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     waresId:that.waresId,
				     },
				     afterAjax: (res) => {
						 		console.log(res,'寄售商品详情接口')
						 		if (res.code !== 200) {
						 			console.log(res.data,'寄售商品详情接口错误')
						 		}
						 		if (res.code == 200) {
						 			console.log('寄售商品详情通了')
									uni.showToast({
										title: '寄售商品详情接口',
										icon: 'none'
									})
						 		}
				     }
				    })
			},
		
			// 删除评论接口（买家）
			mai2Shan() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleOrders/idleOrderBuyEvaluateDelete',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     evaluateId:that.pinglunid,
					 orderId:that.dingdan,//举报评论内容
				     },
				     afterAjax: (res) => {
						 		console.log(res,'买家删除评价接口')
						 		if (res.code !== 200) {
						 			// uni.showToast({
						 			// 	title: res.msg,
						 			// 	icon: 'none'
						 			// })
						 			console.log(res.msg,'买家删除评价接口拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('买家删除评价接口通了')
						 			that.report = res
									uni.showToast({
										title: '买家删除评价接口',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
			// 删除评论接口（卖家）
			maiShan() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleOrders/idleOrderSellEvaluateDelete',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     evaluateId:that.pinglunid,
					 orderId:that.dingdan,//举报评论内容
				     },
				     afterAjax: (res) => {
						 		console.log(res,'卖家删除评价接口')
						 		if (res.code !== 200) {
						 			// uni.showToast({
						 			// 	title: res.msg,
						 			// 	icon: 'none'
						 			// })
						 			console.log(res.msg,'卖家删除评价接口拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('卖家删除评价接口通了')
						 			that.report = res
									uni.showToast({
										title: '卖家删除评价接口',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
			// 举报评论接口
			juBaoping() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresCommentReport',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     commentId:that.jubaoping,
					 reportContent:that.reportping,//举报评论内容
				     },
				     afterAjax: (res) => {
						 		console.log(res,'举报评论接口')
						 		if (res.code !== 200) {
						 			// uni.showToast({
						 			// 	title: res.msg,
						 			// 	icon: 'none'
						 			// })
						 			console.log(res.msg,'举报评论接口拿到')
						 		}
						 		if (res.code == 200) {
						 			console.log('举报评论接口通了')
						 			that.report = res
									uni.showToast({
										title: '举报评论信息已提交',
										icon: 'none'
									})
						 		}
								 
				     }
				    })
			},
			// 举报接口
			goReport() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresReport',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     waresId:that.spid,
					 reportContent:that.jubao,//举报内容
				     },
				     afterAjax: (res) => {
						 		console.log(res,'/////')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				title: res.msg,
						 				icon: 'none'
						 			})
						 			console.log(res.msg)
						 			that.$refs.popup.close()
						 		}
						 		if (res.code == 200) {
						 			console.log('举报接口通了')
						 			that.report = res
									uni.showToast({
										title: '举报信息已提交',
										icon: 'none'
									})
									that.$refs.popup.close()
						 		}
								 
				     }
				    })
			},
			// 评论列表
			pingLun() {
				var that = this
				that.$http.req.ajax({
				     path: ':8090/web/idleWares/idleWaresCommentList',
					 header: {
					       'token': uni.getStorageSync('token')
					      },
				     data: {
				     waresId:that.waresId,
					 pageNum: '1',
					 pageSize: '10'
				     },
				     afterAjax: (res) => {
						 		console.log(res.img,'1111')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				title: '获取评论列表失败',
						 				icon: 'none'
						 			})
						 			console.log(res.img)
						 			
						 		}
						 		if (res.code == 200) {
						 			console.log('拿到了评论列表')
						 			that.shuju = res
									that.WaresIdComment = res.data
									console.log(that.WaresIdComment)
						 		}
						 	
				     }
				    })
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.title {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			width: 750rpx;
			padding: 25.36rpx;
			.title-img {
				width: 83.33rpx;
				height: 83.33rpx;
				margin-right: 21.73rpx;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
			.title-name {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				.title-name1 {
					font-size: 28.98rpx;
					font-weight: 600;
				}
				.title-name2 {
					font-size: 21.73rpx;
					color: #848080;
					margin-top: 12.68rpx;
				}
			}
		}
		.name {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 32.6rpx 25.36rpx;
			.name-jia {
				font-size: 21.73rpx;
				color: #EB3E3E;
				margin-bottom: 18.11rpx;
			}
			.name-title {
				font-size: 25.36rpx;
				font-weight: 500;
				line-height: 50.72rpx;
			}
		}
		.xiangqing-img {
			width: 750rpx;
			margin: 21.73rpx 25.36rpx 0 25.36rpx;
			image {
				max-width: 100%;
				max-height: 100%;
			}
		}
		.xiangqing-img-name {
			margin-top: 10.86rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.xiangqing-img-name1, .xiangqing-img-name2 {
				font-size: 21.73rpx;
				color: #84806a;
				padding-right: 25.36rpx;
				padding-left: 25.36rpx;
			}
		}
		// 留言区域
		.liuyan {
			margin-top: 72.46rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.liuyan-title {
				margin: 0 25.36rpx 18.11rpx 25.36rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.liuyan-title1 {
					margin: 0 18.11rpx 0 18.11rpx;
					font-size: 28.98rpx;
					font-weight: 600;
				}
				.liuyan-title2 {
					font-size: 25.36rpx;
					color: #2B9CEF;
				}
			}
			.liuyan-content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 28.98rpx 25.36rpx 120.57rpx 25.36rpx;
				.liuyan-content-top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 28.98rpx 25.36rpx 0 25.36rpx;
					.liuyan-content-top1 {
						width: 175.79rpx;
						height: 57.97rpx;
						image {
							float: left;
							max-width: 57.97rpx;
							max-height: 57.97rpx;
						}
						span {
							margin-left: 28.98rpx;
							font-size: 28.98rpx;
							font-weight: 600;
							line-height: 57.97rpx;
							height: 57.97rpx;
						}
					}
					.liuyan-content-top2 {
						width: 28.98rpx;
						height: 28.98rpx;
						image {
							max-width: 100%;
							max-height: 100%;
						}
					}
				}
				.liuyan-content-content {
					margin: 0 25.36rpx 43.47rpx 108.69rpx;
					font-size: 25.36rpx;
					font-weight: 400;
				}
				.liuyan-content-bottom {
					margin: 0 25.36rpx 28.98rpx 108.69rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.liuyan-content-bottom1 {
						font-size: 21.73rpx;
						font-weight: 500;
					}
					.liuyan-content-bottom2 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.liuyan-content-bottom2-left {
							width: 28.98rpx;
							height: 28.98rpx;
							margin-right: 14.49rpx;
							image {
								max-width: 100%;
								max-height: 100%;
							}
						}
						.liuyan-content-bottom2-right {
							font-size: 21.73rpx;
							color: #757575;
						}
					}
				}
			}
			.btn {
				position: fixed;
				bottom: 0;
				background-color: #ffffff;
				width: 749.99rpx;
				height: 105.07rpx;
				padding: 12.68rpx 27.17rpx;
				margin-top: 105.07rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.btn-left {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.btn-left1 {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin: 0 12.68rpx;
						.btn-left-top {
							width: 50.72rpx;
							height: 50.72rpx;
							image {
								max-width: 100%;
								max-height: 100%;
							}
						}
						.btn-left-bottom {
							font-size: 21.73rpx;
						}
					}
				}
				.btn-right {
					width: 192.02rpx;
					height: 79.71rpx;
					line-height: 79.71rpx;
					text-align: center;
					font-size: 25.36rpx;
					font-weight: 600;
					background-color: #fcca22;
					border-radius: 39.85rpx;
					margin-right: 25.36rpx;
				}
			}
		}
		.popuptwo {
			width: 400rpx;
			height: 120rpx;
			border-radius: 30rpx;
			padding: 20rpx;
			background-color: #f55555;
		}
		.pop-input {
			background-color: #ffffff;
			color: #000;
			padding-top: 10rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			font-size: 21rpx;
			padding-left: 20rpx;
			border-bottom: 1rpx solid #a6a6a6;
			border-radius: 10rpx 10rpx 0 0;
		}
		.prop-btn {
			background-color: #ffffff;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-bottom: 10rpx;
			.prop-btn1, .prop-btn2 {
				width: 120rpx;
				height: 50rpx;
				list-style: 80rpx;
				text-align: center;
				font-size: 12rpx;
			}
		}
		.popup {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			height: 100vh;
			background-color: rgba(0,0,0,0.6);
			z-index: 9998;
		}
		.popup-info{
			position: fixed;
			width: 550upx;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			font-size: 30upx;
			padding: 40upx;
			border-radius: 20upx;
			background-color: #fff;
			z-index: 9999;
			span {
				font-size: 28.98rpx;
				text-align: center;
				font-weight: 600;
				margin-left: 40%;
			}
			.popup-input {
				border: 1rpx solid #d8d8d8;
				border-radius: 10rpx;
				height: 120rpx;
				margin-top: 20rpx;
				input {
					font-size: 21rpx;
				}
			}
		}
	}
</style>
